import { Input, Select, DatePicker } from "antd";
import type { SearchFormItem } from "../Index";
import type { DefaultOptionType } from "antd/es/select";
const { RangePicker } = DatePicker;

/**
 * 表单项输入框
 * @param props
 * @returns
 */
export const SearchInput = ({ ...props }: SearchFormItem) => {
	return (
		<Input
			disabled={props?.disabled}
			allowClear={props?.allowClear ?? true}
			placeholder={props?.placeholder ?? `请输入${props?.label}`}
			onChange={props?.onChange}
			value={props?.value}
		/>
	);
};

/**
 * 表单项选择器
 * @param props
 * @returns
 */
export const SearchSelect = ({ ...props }: SearchFormItem) => {
	return (
		<Select
			disabled={props?.disabled}
			options={props?.options as DefaultOptionType[]}
			onChange={props?.onChange}
			allowClear={props?.allowClear ?? true}
			placeholder={props?.placeholder ?? `请选择${props?.label}`}
			value={props?.value}
		/>
	);
};

/**
 * 表单项日期选择器
 * @param props
 * @returns
 */
export const SearchDatePicker = ({ ...props }: SearchFormItem) => {
	return props?.isDateRange ? (
		<RangePicker
			className="w-full"
			picker={props?.picker}
			format={props?.format}
			showTime={props?.showTime}
			onChange={props?.onChange}
			disabled={props?.disabled}
			value={props?.value}
			allowClear={props?.allowClear ?? true}
		/>
	) : (
		<DatePicker
			className="w-full"
			picker={props?.picker}
			format={props?.format}
			showTime={props?.showTime}
			onChange={props?.onChange}
			disabled={props?.disabled}
			value={props?.value}
			allowClear={props?.allowClear ?? true}
		/>
	);
};
